<template>
	<view class="canvas-container">
		<div class="write-box">
			<view class="head">
				<view class="title">
				签名
				</view>
			</view>
			<view class="canvas-wrap">
				<div class="write-block">
					<canvas type="2d" :disable-scroll="true" @touchstart="handleTouchStart" @touchmove="handleTouchMove"
						@touchend="handleTouchEnd" class="mycanvas" id="myCanvas"></canvas>
				</div>
			</view>
			<view class="foot">
				<button type="default" class="btn" @tap='handleClearCanvas'>重写</button>
				<button type="default" class="btn" @tap="handleSaveCanvas">提交</button>
			</view>
		</div>
	</view>
</template>
<script>
	import SignaturePad from '@/utils/signature_pad.js';
	import {
		singlog
	} from '@/config/api.js'
	export default {
		components: {
		},
		data() {
			return {
				canvas: null,
				status: 1,
				signaturePad: new SignaturePad(),
				data: {
					img: '',
					email: '',
					sms_code: '',
					mobile: '',
					username: ''
				}
			};
		},
		onReady: function() {
			var that = this;
			const query = uni.createSelectorQuery();
			query
				.select('#myCanvas')
				.fields({
					node: true,
					size: true
				})
				.exec((res) => {
					const canvas = res[0].node;
					const ctx = canvas.getContext('2d');
					const dpr = uni.getSystemInfoSync().pixelRatio;
					canvas.width = res[0].width * dpr;
					canvas.height = res[0].height * dpr;
					ctx.scale(dpr, dpr);
					this.signaturePad.init(canvas);
					that.canvas = canvas
				}); // const signaturePad = new SignaturePad(context)
			this.status = 0
		},
		methods: {
			handleTouchStart(event) {
				this.signaturePad.handleTouchStart(event);
			},

			handleTouchMove(event) {
				this.signaturePad.handleTouchMove(event);
			},

			handleTouchEnd(event) {
				this.signaturePad.handleTouchEnd(event);
			},
			getdata(e) {
				this.data = e
				this.status = 1
			},
			singlog() {
				var that = this;
				singlog(this.data, {
					custom: {
						auth: true
					}
				}).then(res => {
					if (res.status == 200) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					} else {
						that.status = 0
					}
				}).catch(err => {

				})
			},
			handleSaveCanvas(event) {
				if (!this.canvas) {
					return;
				}
				var that = this;
				uni.canvasToTempFilePath({
					canvas: that.canvas,
					success(res) {
						console.log(res)
						wx.getFileSystemManager().readFile({
							filePath: res.tempFilePath, //图片路径
							encoding: 'base64', //编码格式
							success: res => { //成功的回调
								var data = 'data:image/png;base64,' + res.data
								console.log(data)
								that.data.img = data
								that.singlog()
							}
						})
					}
				})
			},

			handleClearCanvas(event) {
				this.signaturePad.clear();
			}
		}
	};
</script>
<style scoped lang="scss">
	page {
		width: 100%;
		height: 100%;
	}

	.canvas-container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.canvas-wrap {
		flex: 1;
	}

	.canvas-btn-wrap {
		margin: 20rpx 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.canvas-btn {
		display: inline-block;
	}

	.write-box {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 0 30rpx;

		.title {
			font-size: 30rpx;
			color: #333333;
			text-align: center;
			line-height: 88rpx;
			height: 88rpx;
		}

		.write-block {
			border: 1rpx dashed #aaaaaa;
			border-radius: 10rpx;
			height: 572rpx;
			width: 689rpx;
		}

		.foot {
			padding: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.btn {
				font-size: 30rpx;
				color: #fff;
				background-color: #cccccc;
				border-radius: 10rpx;
				height: 74rpx;
				line-height: 74rpx;
				width: 196rpx;
				margin: 0 30rpx;
			}
		}
	}

	.body {
		height: 400rpx;
	}

	.mycanvas {
		height: 566rpx;
		width: 685rpx;
		background: #fff;
	}
</style>
